<template>
    <div>
        <!-- <button @click="aaa" value="戳我弹">戳我弹</button> Toast 组件测试 -->
        <!-- <mt-swipe :auto="2000">
            <mt-swipe-item v-for="v of swipeImgList" :key="v.img">
                <img :src="v.img">
            </mt-swipe-item>
        </mt-swipe> -->
        <!-- 轮播图组件的抽离，采用全局注册吧 -->
        <swipeCom :swipeImgList="swipeImgList" :isW100="isW100"></swipeCom>

        <!-- MUI 库 9宫格改造为6宫格 -->
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/newslist">
                    <img src="../../images/menu1.png" />
                    <div class="mui-media-body">新闻资讯</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/imglist">
                    <img src="../../images/menu2.png" />
                    <div class="mui-media-body">图片分享</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/goodslist">
                    <img src="../../images/menu3.png" />
                    <div class="mui-media-body">商品购买</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/feedback">
                    <img src="../../images/menu4.png" />
                    <div class="mui-media-body">留言反馈</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/vidolist">
                    <img src="../../images/menu5.png" />
                    <div class="mui-media-body">视频专区</div></router-link></li>
            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/contact">
                    <img src="../../images/menu6.png" />
                    <div class="mui-media-body">联系我们</div></router-link></li>
        </ul> 

    </div>
</template>

<script>
    // import { Toast } from 'mint-ui'; 提到 main.js里面去引入，可以全局使用，这个东西不需要注册，导进来就可以了，官网 api 中有不少可以不用注册，多注意官网提供的用法，有些需要 Vue.use 注册，有些需要 Vue.component 注册
    // 但是全局导入，就坑了，如何解决？看main.js 和 README.md 文档
    export default {
        data () {
            return {
                swipeImgList: [],
                isW100: true,
            }
        },
        created () {
            this.getSwipeImg();
        },
        methods: {
            getSwipeImg () {
                this.$http.get('api/getlunbo').then( res => {
                    // console.log(res.body);  不想每次切换到此页面都重新发送请求，就配置缓存文件 H5 学过一个应用缓存，该请求仅在页面初次加载的时候去发送，其他页面同样如此
                    if ( res.body.status === 0 ) {
                        this.swipeImgList = res.body.message;
                    } else {
                        this.$toast('获取轮播图数据失败')
                    }
                })
            },
            /* 调试 Tosat 导入挂载问题
            aaa() {
                // console.log(Toast);
                this.$toast('222')
                // Toast('22223333')
            }, */
        },
    }
</script>

<style lang="scss" scoped>
    /* .mint-swipe {
        height: 200px;
        .mint-swipe-item {
            &:nth-child(1) {  //没有 & 符，表示后代选择器，带有 & 符，表示兄弟
                background-color: #f00;
            }
            &:nth-child(2) {
                background-color: #0f0;
            }
            &:nth-child(3) {
                background-color: #00f;
            }
            img {
                width: 100%;
                height: 100%;
            }
        }
    } */
    .mui-grid-view.mui-grid-9 {
        background-color: #fff;
        border: 0;
        img {
            width: 60px;
            vertical-align: top; //清除底部空白带的 bug
        }
        .mui-media-body {
            font-size: 13px;
        }
    }
    .mui-grid-view.mui-grid-9 .mui-table-view-cell {
        border: 0;
    }
</style>